<template>
  <div class="page">
    <div class="grid justify-center items-center text-center mt-[100px]">
      <div class="text-3xl font-bold">请扫描下方二维码开始答题！</div>
      <div class="text-2xl mt-2 font-bold">第 <span class=" text-red-500">{{(index+1)}}</span> 题</div>
      <div
        class="flex justify-center border my-5 relative py-5"
        v-if="questionList.length > 0"
      >
        <qrcode-vue
          :value="qrcodeValue(`${questionList[index].id}`)"
          :size="size"
          :margin="5"
          render-as="svg"
          level="H"
        />
        <div class="absolute bottom-5 right-2">
          <a-button
            status="success"
            @click="size = size / 1.5"
            type="primary"
            size="mini"
            class="mr-2"
            >缩小</a-button
          >
          <a-button
            status="success"
            @click="size = size * 1.5"
            type="primary"
            size="mini"
            >放大</a-button
          >
        </div>
      </div>
      <div class="flex justify-between">
        <a-button
          class="mr-5"
          :disabled="index === 0"
          @click="pre()"
          type="primary"
          >上一题</a-button
        >
        <a-button
          @click="next()"
          :disabled="questionList.length - 1 === index"
          type="primary"
          >下一题</a-button
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import { Message } from "@arco-design/web-vue";
import { findQuestions } from "@/apis/question";
import { ref, onMounted } from "vue";
import QrcodeVue from "qrcode.vue";

const size = ref(250);
const connection = ref({});
connection.value = new WebSocket("ws://localhost:8080/socket/teacher");

connection.value.onopen = (event) => {
  console.log("🚀 ~ file: Test.vue:15 ~ event", event);
};

connection.value.onmessage = (event) => {
  console.log("🚀 ~ file: Test.vue:19 ~ event", event);
  // Message.info(event.data);
};

const sendMessage = (message) => {
  connection.value.send(message);
};

const questionList = ref([]);

const index = ref(0);

const getQuestions = async () => {
  const res = await findQuestions();
  questionList.value = res.data;
};

const qrcodeValue = (value) => {
  const preix = window.location.origin;
  return `${preix}/answerQues/${value}`;
};

const next = () => {
  if (index.value < questionList.value.length - 1) {
    index.value++;
  }
  console.log("🚀 ~ file: Test.vue:73 ~ next ~ index", index.value);
};

const pre = () => {
  if (index.value > 0) {
    index.value--;
  }
};

onMounted(() => {
  getQuestions();
});
</script>

<style lang="scss" scoped></style>
